/* eslint-disable */
<style lang="scss" scoped>
    @import '~@/scss/global/colors.scss';
    .small-chart{
        display:flex;
        position:relative;
        height:45px;
        align-items:flex-end;
    }
    .cont{
        top:0;
        left:0;
        width:100%;
        height:100%;
        background-color:$content-item-bg;
    }
</style>
<template>
    <div class="ui flex column p-10 cont">
        <div class="ui flex">
            <div class="item one">
                <el-card shadow="hover" class="m-10">
                    <div class="t-sub">个人本年总销售额</div>
                    <div class="f-30 p-t-20 p-b-20">￥{{x1 | amount}}</div>
                </el-card>
            </div>
            <div class="item one">
                <el-card shadow="hover" class="m-10">
                    <div class="t-sub">个人本年收款情况</div>
                    <div class="f-30 p-t-20 p-b-20">￥{{x2 | amount}}</div>
                </el-card>
            </div>
            <div class="item one">
                <el-card shadow="hover" class="m-10">
                    <div class="t-sub">目标完成情况(万元)</div>
                    <div class="f-25 p-t-20 p-b-20 big-txt">{{x3}}</div>
                </el-card>
            </div>
        </div>
        <div class="item one">
            <el-card shadow="hover" class="m-10">
                <div slot="header" class="clearfix">
                    <span class="t-sub">年度销售曲线</span>
                </div>
                <div style="height:350px" class="ui flex">
                    <div class="w-70p h-100p">
                        <ui-echarts :option="bar3"></ui-echarts>
                    </div>
                    <div class="item one p-l-30">
                        <el-menu :default-active="activeIndex"
                            class="el-menu-demo"
                            mode="horizontal"
                            >
                            <el-menu-item index="1">收款记录（近期）</el-menu-item>
                            <!--<a href="#/sale_receiptReq" style="float: right; padding: 3px 0" type="text">更多</a>-->
                        </el-menu>
                        <div class="ui middle aligned divided list">
                            <div v-if="datas.length > 0" class="item p-t-10 p-b-10" v-for="item in datas" :key="item.contract_no">
                                <div class="right floated content p-t-5">
                                    {{item.charge_date_str}}
                                </div>
                                <!--<div class="right floated content p-t-5">
                                    <i class="checkmark box icon" style="color: #01AAD7;font-size: 16px"></i>
                                </div>-->
                                <div class="content t-sub">{{item.contract_name}}</div>
                                <div class="content t-sub">{{item.contract_no | contract}}</div>
                            </div>
                            <div  v-if="datas.length == 0" class="item p-t-10 p-b-10">
                                无数据！
                            </div>
                        </div>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>
<script>
    //表格的公共方法 使用表格必须混入 //
    import UiTable from '@/common/mixins/ui-get-table.js'

    // import 'echarts'
    export default {
        mixins: [UiTable],//混入获取数据的公共方法
        data() {
            return {
                url:'/admin/sale/home/',
                zoom:true,
                activeIndex:'1',
                bar3:{
                    grid:{
                        left:0,
                        top:'10%',
                        bottom:0,
                        right:10,
                        containLabel:true
                    },
                    tooltip:{
                        show:true,
                        backgroundColor:'#384157',
                        borderColor:'#384157',
                        borderWidth:1,
                        formatter:'{b} - {c}(万元)',
                        extraCssText:'box-shadow: 0 0 5px rgba(0, 0, 0, 1)'
                    },
                    xAxis:{
                        data:['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月'],
                        boundaryGap:false,
                        axisLine:{
                            show:false
                        },
                        axisLabel:{
                            textStyle:{
                                color:'#000'
                            }
                        },
                        axisTick:{
                            show:false
                        }
                    },
                    yAxis:{
                        name:'万元',
                        textStyle:{
                            color:'#000'
                        },
                        ayisLine:{
                            show:false
                        },
                        axisLabel:{
                            textStyle:{
                                color:'#000'
                            }
                        },
                        splitLine:{
                            show:false,
                            lineStyle:{
                                color:'#2e3547'
                            }
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#000'
                            }
                        }
                    },

                    series:[
                        {
                            type:'bar',
                            name:'linedemo',

                            tooltip:{
                                show:false
                            },
                            animation:false,
                            barWidth:1.4,
                            hoverAnimation:false,
                            data:[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                            itemStyle:{
                                normal:{
                                    color:'#01AAD7',
                                    opacity:0.6,
                                    label:{
                                        show:false
                                    }
                                }
                            }
                        },
                        {
                            type:'line',
                            name:'距离',

                            animation:false,
                            symbol:'circle',

                            hoverAnimation:false,
                            data:[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                            itemStyle:{
                                normal:{
                                    color:'#01AAD7',
                                    opacity:0
                                }
                            },
                            lineStyle:{
                                normal:{
                                    width:1,
                                    color:'#384157',
                                    opacity:1
                                }
                            }
                        },
                        {
                            type:'line',
                            name:'linedemo',
                            smooth:true,
                            symbolSize:10,
                            animation:false,
                            lineWidth:1.2,
                            hoverAnimation:false,
                            data:[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                            symbol:'circle',
                            itemStyle:{
                                normal:{
                                    color:'#01AAD7',
                                    shadowBlur:40,
                                    label:{
                                        show:true,
                                        position:'top',
                                        textStyle:{
                                            color:'#01AAD7'

                                        }
                                    }
                                }
                            },
                            areaStyle:{
                                normal:{
                                    color:'#01AAD7',
                                    opacity:0.08
                                }
                            }

                        }
                    ]
                },
                x1:0,
                x2:0,
                x3:'无销售目标',
                datas:[]
            }
        },
        mounted() { //
            this.$$uiTableLoad().then((data) => {
                if(data.vos.length > 0) {
                    for(let j = 0; j < data.vos.length; j++) {
                        let a = data.vos[j];
                        if(a.d_type == 'z') {
                            this.x1 = a.amount;
                        }
                        if(a.d_type == 's') {
                            this.x2 = a.amount;
                        }
                    }

                    for(let k = 0; k < data.vos.length; k++) {
                        let b = data.vos[k];
                        if(b.d_type == 'm') {
                            let wc = (this.x1/10000).toFixed(0);
                            let precent = b.amount == 0?0:(this.x1/b.amount*100).toFixed(2);
                            this.x3 = wc + "/" + (b.amount/10000).toFixed(0) + "("+precent+"%)";
                        }
                    }
                }

                if(data.lines.length > 0) {
                    this.bar3.series[0].data = [];
                    this.bar3.series[2].data = [];
                    for(let i = 0; i < data.lines.length; i++) {
                        this.bar3.series[0].data.push(data.lines[i].amount);
                        this.bar3.series[2].data.push(data.lines[i].amount);
                    }
                }

                if(data.datas) {
                    this.datas = data.datas;
                }
            })
        }
    }
</script>
